<template>
  <div class="addauthorize">
    <hunk-head customEvent="true" @headFn="gobanck" name="延长授权"></hunk-head>
    <div class="content">
      <hunk-list class="flex1" :list="houseList" @clickitem="clickitem" @clickBtn="clickBtn" @onRefresh="onRefresh" @searchInput= "searchInput"></hunk-list>
    </div>
    
    <uni-popup ref="popup" type="center">
      <div class="tips">
        <div class="close" @click="closePopup">
          <img v-if="baseUrl" :src="baseUrl+'order/close.png'" alt="" srcset="">
        </div>
        <div class="tips-top">{{houseItem.address}}</div>
        <div class="tishi">
          <img v-if="baseUrl" :src="baseUrl+'order/tips.png'" alt="">
          <div>
            请确认线下收到租客房租，延长授权后租客开延长至{{changeTime(authorize.extendvaildatatime)}}
          </div>
        </div>
        <div class="tips-text">
          <div class="zuke1">租客</div>
          <div class="text-item">
            <div class="left">
              姓名：
              <span>{{authorize.tenantName}}</span>
            </div>
            <div class="right">
              身份证：
              <span>{{authorize.tenantCardid}}</span>
            </div>
          </div>
          <div class="space"></div>
          <div v-for="(item,index) in authorize.roommates" :key="index">
            <div class="zuke1">合租人</div>
            <div class="text-item">
              <div class="left">
                姓名：
                <span>{{item.roommatename}}</span>
              </div>
              <div class="right">
                身份证：
                <span>{{item.roommatecardid}}</span>
              </div>
            </div>
            <div class="space"></div>
          </div>
          
          <!-- <div class="zuke1">合租人</div>
          <div class="text-item">
            <div class="left">
              姓名：
              <span>李默</span>
            </div>
            <div class="right">
              身份证：
              <span>320324199204030776</span>
            </div>
          </div>
          <div class="space"></div> -->
          <div class="text-iteml">
            <div class="left">当前授权结束时间：</div>
            <div class="right">
               {{authorize.currvaildatatime}}
            </div>
          </div>
          <div class="space"></div>
          <div class="text-iteml">
            <div class="left">延长时间： </div>
            <div class="right">
              {{authorize.extendvaildatatime}}
            </div>
          </div>
          <div class="space"></div>
        </div>
        <div class="tips-btn">
          <button @click="addshouquan(0)">
            延长授权
          </button>
        </div>
        <div class="number">
          <div class="left">临时延长天数</div>
          <div class="right">
            <uni-number-box v-model="num" background="#fff"></uni-number-box>
          </div>
        </div>
        <div class="tips-btn">
          <button class="linshi"  @click="addshouquan(1)">临时延长(欠租)</button>
        </div>
      </div>
    </uni-popup>
    <uni-popup ref="popup1" type="center">
      <div class="tips1">
        <div class="tips-top">提示</div>
        <div class="tips-text">该订单已经快结束，如需延长授权，请生成新的合同</div>
        <div class="tips-btn">
          <div class="btn-closs" @click="closePopup1">取消</div>
          <div  @click="check">确认</div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import List from '@componentsMine/list'
import {debounce} from 'lodash'
import { getHouseList, ExtendHouseInfo, getExtendHouseInfo } from '@/apis/housesInfo'
export default {
  components: {
    'hunk-head': Head,
    'hunk-list': List
  },
  data() {
    return {
      addresslike: '',  //模糊查询
      houseattribute: [],  // 出租方式 0-自持 1-托管
      housetype: [],  // 0-空 1-已租 2-欠租 3-接近交租 4-租约快到期 5-未绑定门锁
      outtype: [],  //出租方式 0-合租 1-整租
      houseList: [],
      num: 0,
      authorize: {
        "extendvaildatatime": "",
        "houseaddress": "",
        "houseid": 0,
        "houserommid": 0,
        "roommates": [
          {
            "avatar": "",
            "contractid": 0,
            "houseid": 0,
            "houseroomid": 0,
            "roommatecardid": "",
            "roommatename": "",
            "telphone": "",
            "userid": 0,
            "wid": 0
          }
        ],
        "tenantCardid": "",
        "tenantName": ""
      },
      houseItem: {
        address: ''
      }
    }
  },
  computed: {
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    },
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    }
  },
  created(){
    this.getHouseList()
  },
  methods: {
    // uni.redirectTo({ url: '/pages/index/index' })
    gobanck(){
      uni.redirectTo({ url: '/pages/index/index' })
    },
    onRefresh(){
      this.getHouseList()
    },
    searchInput(item){
      this.addresslike = item
      this.getHouseList()
    },
    clickitem(item) {
      if(item.isitem != 0 && item.tag != 0){
        this.getExtendHouseInfo(item)
      }else{
        if(item.tag == 0 && item.isitem != 0){
          uni.showToast({
            title: '未租房源,无法延长授权',
            icon: 'none'
          })
        }else{
          uni.showToast({
            title: '未绑定门锁,无法延长授权',
            icon: 'none'
          })
        }
      }
      
    },
    clickBtn(item){
      let arr = item.split(',')
      this[arr[0]] = arr
      this[arr[0]].shift()
      this.getHouseList()
    },
    getHouseList(){
      const data = {
        addresslike: this.addresslike,  //模糊查询
        houseattribute: this.houseattribute,  // 出租方式 0-自持 1-托管
        housetype: this.housetype,  // 0-空 1-已租 2-欠租 3-接近交租 4-租约快到期 5-未绑定门锁
        outtype: this.outtype,   //出租方式 0-合租 1-整租
        userid: this.userid
      }
      getHouseList(data).then(res=>{
        if(res.code == 200){
          if(!res.data){
            this.houseList = []
            return
          }
          this.houseList = res.data
        }
      })
    },
    addshouquan:debounce(function(type){
      
      // this.$refs.popup.close()
      // this.$refs.popup1.open()
      if(+this.authorize.payrenttype===0){
          uni.showToast({
            title: '线上交租不能延长授权',
            icon: 'none'
          })
        return
      }
      this.extendHouseInfo(type)
    },1000),
    closePopup(){
      this.$refs.popup.close()
    },
    closePopup1(){
      this.$refs.popup1.close()
    },
    check(){
      console.log('this.houseItem',this.houseItem)
      this.$refs.popup1.close()
      let data = {
        newcontractid:this.houseItem.contractid,
        address: this.houseItem.address,
        houseid: this.houseItem.houseid,
        houseroomid: this.houseItem.houseroomid
      }
      uni.redirectTo({ url: '/subPackage/manage/commponents/tenant/setLease?query=' + JSON.stringify(data) })
    },
    // 获取延长授权所需信息
    getExtendHouseInfo(item){
      getExtendHouseInfo({ userid:this.userid, contractid: item.contractid}).then(res=>{
        if(res.code == 200){
          this.houseItem = item
          this.authorize = res.data
          this.$refs.popup.open()
        }
      })
    },
    extendHouseInfo(type){
      const data = {
        contractid: this.houseItem.contractid,
        day: type ? this.num : '',
        type: type,
        userid: this.userid
      }
      ExtendHouseInfo(data).then(res=>{
        if(res.code == 200){
          this.$refs.popup.close()
          uni.showToast({
            title: '延长授权成功！',
            icon: 'none'
          })
        }else if(res.code == 300){
          this.$refs.popup.close()
          this.$refs.popup1.open()
        }
      })
    },
    changeTime(item){
      let arr = item.split('-')
      return arr[0]+'年'+arr[1]+'月'+arr[2]+'日'
    }
  }
}
</script>

<style lang="scss" scoped>
.addauthorize{
  width: 100vw;
  box-sizing: border-box;
  height: 100vh;
  @include num();
  background: #F9F9F9;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    display: flex;
    overflow-y: auto
  }
  .flex1{
    flex: 1;
    display: flex;
  }
  .tips{
    width: 335px;
    // height: 304px;
    background: #FFFFFF;
    border-radius: 10px;
    padding-bottom: 20px;
    .close{
      position: absolute;
      top: 22px;
      right: 8px;
      width: 18px;
      height: 18px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .tips-top{
    padding-left: 18px;
    padding-right: 25px;
    height: 60px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;
    line-height: 60px;
    text-align: center;
    overflow: hidden;
  }
  .tishi{
    height: 55px;
    background: #FF6B75;
    box-sizing: border-box;
    padding-left: 18px;
    padding-right: 10px;
    display: flex;
    align-items: center;
    img{
      display: block;
      width: 20px;
      height: 16px;
      margin-right: 13px;
    }
    div{
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 18px;
    }
  }
 .tips-text{
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 10px;
    .zuke1{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 20px;
    }
    .text-item{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      box-sizing: border-box;
      padding-right: 15px;
      span{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4A4A4A;
        line-height: 20px;
      }
    }
    .text-iteml{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 20px;
      display: flex;
      justify-content: space-between;
      padding-right: 15px;
      .right{
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #4A4A4A;
        line-height: 20px;
      }
    }
    .space{
      width: 320px;
      height: 1px;
      border: 1px solid #EFEFEF;
      margin: 10px 0;
    }
  }
  .tips-btn{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      button{
        width: 305px;
        height: 45px;
        background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
        border-radius: 100px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 45px;
      }
      .linshi{
        margin-left: 10px;
        background: #ccc;
      }
      button::after{
        border: 0;
      }
    }
  }
  .tips .number{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
    border-bottom: 2px solid #EFEFEF;
    box-sizing: border-box;
    padding: 13px 0;
    .left{
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 21px;
      padding-left: 15px;
    }
    .right{
      padding-right: 15px;
    }
  }
  .tips1{
    width: 335px;
    height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
    .tips-top{
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #4A4A4A;
      line-height: 22px;
      margin-top: 20px;
    }
    .tips-text{
      margin: 20px 0;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6D7278;
      line-height: 22px;
      padding: 0 20px;
      text-align: center;
    }
    .tips-btn{
      width: 100%;
      border-top: 2px solid #EFEFEF;
      display: flex;
      position: absolute;
      bottom: 0;
      div{
        height: 40px;
        width: 50%;
        font-size: 13px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #4A4A4A;
        line-height: 40px;
        text-align: center;
      }
      .btn-closs{
        border-right: 2px solid #EFEFEF;
      }
    }
  }
}
::v-deep .uni-numbox{
   border: 1px solid #9B9B9B;
  // .uni-numbox__minus{
   
  // }
  .uni-numbox__value{
    border: 0;
    border-left: 1px solid #9B9B9B;
    border-right: 1px solid #9B9B9B;
  }
  // .uni-numbox__plus{
  //   border: 1px solid #9B9B9B;
  // }
}

</style>
